<template>
    <div>
        <div class="head">
            <div class="city-name">
                <i class="iconfont icon-dingwei"></i>
                {{ state.city }}
            </div>
            <div class="city-change">
                <i class="iconfont icon-24gf-city4"></i>
                切换城市
            </div>
        </div>
        <div class="main">
            <div class="weather-info">
                <p class="temp">{{ state.weather.temperature }}℃</p>
                <p class="info">{{ state.weather.weather }}</p>
                <div class="detail">
                    <div class="item">
                        <i class="iconfont icon-shuidi"></i>
                        <span>湿度</span>
                        <span>{{ state.weather.humidity }}%</span>
                    </div>
                    <div class="item">
                        <i class="iconfont icon-fengsufengxiang"></i>
                        <span>风向</span>
                        <span>{{ state.weather.windDirection }}风</span>
                    </div>
                    <div class="item">
                        <i class="iconfont icon-fenglifadian"></i>
                        <span>风力</span>
                        <span>{{ state.weather.windPower }}</span>
                    </div>
                </div>
            </div>
            <div class="future-info">
                <div class="threeDay">三日天气预报</div>
                <div class="day-weather" v-if="state.future.length > 1">
                    <div class="day-weather-item">
                        <p>周{{ dayChinese[state.future[1].week] }}</p>
                        <div class="weather-condtion" >
                            <i  v-bind:class="weatherIcon[threeDayWeather[0]]"></i>
                            <div>{{state.future[1].dayWeather}}</div>
                        </div>
                        <div class="wenducha">
                            <span>{{ state.future[1].dayTemp }}℃     </span><span>/ {{ state.future[1].nightTemp }}℃</span></div>
                    </div>
                    <div class="day-weather-item">
                        <p>周{{ dayChinese[state.future[2].week] }}</p>
                        <div class="weather-condtion">
                            <i v-bind:class="weatherIcon[threeDayWeather[1]]"></i>
                            <div>{{state.future[2].dayWeather}}</div>
                        </div>
                        <div class="wenducha">
                            <span>{{ state.future[2].dayTemp }}℃   </span><span>/ {{ state.future[2].nightTemp }}℃</span></div>
                    </div>
                    <div class="day-weather-item">
                        <p>周{{ dayChinese[state.future[3].week] }}</p>
                        <div class="weather-condtion">
                            <i v-bind:class="weatherIcon[threeDayWeather[2]]"></i>
                            <div>{{state.future[3].dayWeather}}</div>
                        </div>
                        <div class="wenducha">
                            <span>{{ state.future[3].dayTemp }}℃   </span><span> / {{ state.future[3].nightTemp }}℃</span></div>
                    </div>
                </div>
            </div>
            <div class="container"></div>
        </div>
    </div>
</template>


<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, reactive,computed } from 'vue'


const state = reactive({
    city: '北京市',
    weather: {},
    future: [],
})




onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "246060f6b6bff9e187936eaabccd47fb",
    };
    AMapLoader.load({
        key: "7cc5b412fb11b1fd8a23fb63aa52c9df", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            // 获取定位
            getLocalCity(AMap)
        })
})


const getLocalCity = (AMap) => {
    AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
            }
            console.log(result.city);
            state.city = result.city;
            getWeather(AMap)
        })
    })
}

const getWeather = (AMap) => {
    //加载天气查询插件
    AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(state.city, function (err, data) {
            console.log(err, data);
            state.weather = data          
        });
        // 获取未来天气情况
        weather.getForecast(state.city, function (err, data) {
                console.log(err, data);                
                state.future = data.forecasts; 
           })
               
})
}


const threeDayWeather = computed(() => {
    let arr = [];
    for (let i = 1; i < 4; i++) {        
        if (state.future.length > 1) {
            arr.push(state.future[i].dayWeather);          
        }       
    }
    return arr;
});


const weatherIcon = {
    '晴':'iconfont icon-qingtian',
    '阴':'iconfont icon-yintian',
    '多云':'iconfont icon-duoyun',
    '小雨':'iconfont icon-xiayu',
    '中雨':'iconfont icon-zhongyu',
    '大雨':'iconfont icon-dayu',
    '雪':'iconfont icon-xiaoxue',
    '雾':'iconfont icon-wu',
    '霾':'iconfont icon-mai'
}

const dayChinese = {
    '1':'一',
    '2':'二',
    '3':'三',
    '4':'四',
    '5':'五',
    '6':'六',
    '7':'日'
}
</script>


<style lang="css" scoped>
.head {
    height: 53px;
    background: #8E6FF7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 15px;
}

.city-name {
    font-size: 18px;
}

.city-change {
    font-size: 14px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.main {
    padding: 7px 16px 20px 16px;
}

.weather-info {
    width: 100%;
    background: linear-gradient(146deg, rgba(142, 111, 247, 0.1) 0%, rgba(142, 111, 247, 0.05) 100%), rgba(0, 0, 0, 0);
    border-radius: 16px 16px 16px 16px;
    padding: 24px;
    box-sizing: border-box;
}

.temp {
    font-family: Roboto, Roboto;
    font-weight: 300;
    font-size: 60px;
    color: #000000;
    line-height: 60px;
    text-align: center;
}

.info {
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #4B5563;
    line-height: 21px;
    text-align: center;
}

.detail {
    display: flex;
    margin-top: 24px;
}

.item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item i {
    color: #8E6FF7;
}

.item span:nth-child(2) {
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #4B5563;
}

.item span:nth-child(3) {
    font-size: 16px;
    color: #000000;
}
.future-info{
    padding-top: 24px;
}
.future-info .threeDay{
    font-family: Roboto, Roboto;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    line-height: 28px;
    text-align: left;
    margin-bottom: 16px;
}
.day-weather{
    display: flex;
    overflow-x: auto; /* 允许横向滚动 */
    white-space: nowrap; /* 防止子元素自动换行 */
    scroll-behavior: smooth;
}
.day-weather-item{
    flex: 0 0 120px;
    height: 158px;
    background: #FFFFFF;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #F3F4F6;
    margin-right: 16px;   
}
.day-weather-item p{
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #4B5563;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-left: 17px;
    margin-top: 17px;
}
.day-weather-item .weather-condtion{
    text-align: center;
    width: 64px;
    height: 64px;
    /* background: #8E6FF7; */
    margin: 0 auto;
    margin-top: 8px;
}
.weather-condtion i{
    font-size: 44px;
}
.weather-condtion div{
    font-family: Roboto, Roboto;
    font-size: 14px;
    color: #4B5563;
}
.day-weather-item .wenducha{
    text-align: center;
    margin-top: 10px;
}
.wenducha span:nth-child(1){
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}
.wenducha span:nth-child(2){
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #9CA3AF;
}
</style>